<template>
  <div class="app">
     <h2>{{msg}}，学生姓名：{{name}}</h2>
     <MySchool></MySchool>
     <hr>
     <!-- (2) 在组件上写事件，全都默认是自定义事件，因此还是需要在MyStudent里面触发的
              除非你加上.native
    -->
     <MyStudent  ref="student"></MyStudent>
  </div>
</template>

<script>
/**
 * (1) 如果有多个组件定义的样式选择器名字相同，则后引入的组件样式会覆盖前面的
 *     如果想让各个组件的样式给自己使用，避免冲突，则可以在各个组件中加scrope
 * */ 
 import MySchool from './components/MySchool.vue'
 import MyStudent from './components/MyStudent.vue'


  export default {
      name:'App',
      components:{
        MySchool,
        MyStudent
      },
      data() {
        return {
           msg:'你们好啊~',
           name:''
        }
      },
      methods: {
        show(){
           alert('show方法被调用了')
        },
        // getStudentName(name,...a){
        //    console.log(name,a)
        //    this.name = name
        // },
      },
      mounted() {
        // this.$refs.student.$once('atguigu',this.getStudentName)

        // this.$refs.student.$once('atguigu',function(){
        //       /**
        //        *  (4)注意！在哪个组件上注册的，那么回调函数的this就是这个组件
        //        *    很简单，就像p.call，这个this就是p
        //        *    而下面那个 箭头函数 是默认在当前实例里面的this都是当前实例
        //        * */
        //       console.log(this)
        // })

        this.$refs.student.$once('atguigu',(name,...a) => {
          //  (3)在注册自定义事件时，第二个参数可以直接写个匿名函数,代码更加简洁，最好写成箭头函数
              console.log(name,a)
              this.name = name
        })

      },
  }
</script>

<style>
    .app{
       background-color: gray;
       /* 
         (2) 才终于真正弄懂padding的意思：
          最外面的盒子大小不变、也不移动，动的是内边距
          这里内边距一加，就可以把父组件包着子组件给体现出来
       */
       padding: 5px;
    }
</style>